<script>
import { ref } from 'vue'
export default {
  beforeCreate () {
    console.log('---beforeCreate---')
  },
  // vue3中组合式api的入口函数
  setup () {
    // setup中this是undefined
    console.log('---setup---', this)

    const count = ref(100)
    const change = () => {
      count.value = 200
    }

    // 视图中用到的，必须在这里return
    return {
      count,
      change
    }
  }
}
</script>

<template>
  <div class="">
    Setup
    <p>count is {{ count }}</p>
    <p>
      <button @click="change">change</button>
    </p>
  </div>
</template>

<style scoped></style>
